<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>add</title>

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />

    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css"/>

<body>
<div class="portlet-body">
    <div class="form-body layer-content">
        <div class="form-group" >
            <span class="col-xs-2 form-label">父类类目:</span>
            <div class="col-xs-8">
                <span class="label_on">xxxxxxxxx</span>
            </div>
        </div>
        <div class="form-group" >
            <span class="col-xs-2 form-label"><font class="formRequired">*</font>类目名称:</span>
            <div class="col-xs-8">
                <input type="text" class="categoryName">
            </div>
        </div>

        <div class="form-group" >
            <span class="col-xs-2 form-label"><font class="formRequired">*</font>类目简称:</span>
            <div class="col-xs-8">
                <input type="text" class="categoryShort">
            </div>
        </div>
        <div class="form-group" >
            <span class="col-xs-2 form-label"><font class="formRequired">*</font>类目代码:</span>
            <div class="col-xs-8">
                <input type="text" class="categoryCode">
            </div>
        </div>
    </div>
</div>
</body>
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/layui/layui.all.js"></script>
<script>
    var categoryName = $(".categoryName");
    categoryName.on("input",debounce(setName,500));
    
    function setName(val) {

        if(categoryName === "") return;

        var categoryShort = $(".categoryShort");
        var categoryShortName = categoryShort.val();
        if(categoryShortName === ""){
            categoryShort.val(categoryName.val())
        }

        var categoryCode = $(".categoryCode");
        var categoryCodeName = categoryCode.val();
        if(categoryCodeName === ""){
            categoryCode.val(categoryName.val())
        }

    }

    //函数防抖（执行最后一次）
    function debounce(fn, delay) {
        // 记录上一次的延时器
        var timer = null;
        return function() {
            // 清除上一次延时器
            clearTimeout(timer)
            timer = setTimeout(function() {
                fn.apply(this)
            }, delay)
        }
    }
</script>
</html>